<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 线性渐变 */
        .d1{
            width: 500px;
            height: 200px;
            border: 1px solid #333;

            /* 背景色从左往右进行渐变，红——>黄——>蓝，平均分布每种颜色 */
            /* background-image: linear-gradient(to right, red, yellow, blue); */

            /* 角度值按顺时针方向，上连为0deg，右边为90deg*/
            /* background-image: linear-gradient(25deg, red, yellow, blue); */

            /* 默认是平均分布每种颜色，可以在每种颜色的后面指定一个数值，表示颜色的位置，一般使用百分比 */
            /* background-image: linear-gradient(to right,red,yellow 30%,blue 60%,green); */
            background-image: linear-gradient(to right,#ff9000,#ff7000);
        }

        /* 放射性渐变 */
        .d2{
            width: 500px;
            height: 200px;
            border: 1px solid #333;

            /* background-image: radial-gradient(circle,red,blue); */
            /* background-image: radial-gradient(circle closest-side,red,blue); */
            /* background-image: radial-gradient(circle closest-corner,red,blue); */
            /* background-image: radial-gradient(circle farthest-side,red,blue); */
            /* background-image: radial-gradient(ellipse farthest-corner,red,blue); */
            /* background-image: radial-gradient(circle farthest-corner at bottom,red,blue); */
            background-image: radial-gradient(circle farthest-corner at 100px 50px,red,blue);
        }

        /* 重复性渐变 */
        .d3{
            width: 500px;
            height: 500px;
            border: 1px solid #333;

            /* 、
                最左边是红色，此后直到30px的位置过渡到黄色，然后直到40px的位置再过渡为蓝色，
                然后浏览器会重复平铺图像，直到铺满整个背景
             */
            /* background-image: repeating-linear-gradient(to right,red 0,yellow 30px,blue 60px); */

            /* background-image: repeating-linear-gradient(to right,black,black 20px,white 20px, white 40px); */

            background-image: repeating-radial-gradient(circle,red,red 5px,white 5px,white 10px);



        }

    </style>
</head>
<body>
    <div class="d1"></div>
    <hr>
    <div class="d2"></div>
    <hr>
    <div class="d3"></div>
</body>
</html>